<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%-- <link href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script  src="bootstrap/js/jquery-3.2.0.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
 --%>
<link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css">
<title>器材租借</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>

<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
	var epRentMaxDay;
$(function() {
	var epList = '${session.ep_list}';
	var epCost;
	if(epList.length==0){
		$("#ep_list").hide();
	}else{
		$("#ep_list").show;
	}
	
	$(".rentEp").click(function(){
		$("#rentEpDays").val("");
		$("#rentEpCosts").val("");
		$("small").text("");
		
		var epId = $(this).attr("href") 
		var epName = $(this).parent().parent().children().eq(1).text();
		epCost = $(this).parent().parent().children().eq(4).text();
		epRentMaxDay = $(this).parent().parent().children().eq(5).text();
		$("#epName").val(epName);
		$("#epId").val(epId);
	});
	
	$("#rentEpDays").bind('input propertychange', function() {
		var cost =  parseFloat(epCost) * parseInt($(this).val()); 
		$("#rentEpCosts").val(cost);
	});
	
	
});
	
	function rentBtnClick(){
		var inputDay = $("#rentEpDays").val();
		
		if(inputDay==""){
			$("small").text("请输入租借日期");
			return false;
		}
		if(parseInt(inputDay)==0){
			$("small").text("日期不为零");
			return false;
		}
		if(parseInt(inputDay)>parseInt(epRentMaxDay)){
			$("small").text("超出最长日期");
			return false;
		}
		
		$("#rentFrom").submit(); 
	};
	


</script>
<style>
form{
	margin:0 auto;
	  left: 50%;
  display: inline-block;
  position: relative;
  transform: translateX(-50%);
}
form input{
	margin-left:20px;
	margin-top:10px;
}
table{
	margin:0 auto;
}
table tr th,table tr td{
	padding-left:15px;
}
.navbar-expand-lg{
font-size:20px;
	font-weight:600;
	padding-left:60px;
}
.navbar-expand-lg li{
	padding-left:25px;
}
</style>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-faded">
  <div class="container">
	  <div class="navbar-header">
	      <a class="navbar-brand" >欢迎${sessionScope.user.userName}</a>
	  </div>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
       <ul class="navbar-nav">
         <li class="nav-item "><a class="nav-link " href="${pageContext.request.contextPath }/homepage.jsp">&nbsp;首页&nbsp;</a></li>
         <s:if test="'管理用户' in #session.rolePermission_name_list">
			 <li class="nav-item dropdown">
	          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink">用户管理</a>
	          <ul class="dropdown-menu"  aria-labelledby="navbarDropdownMenuLink">
	            <li><a class="dropdown-item" href="um-userManage">用户管理</a></li>
	            <li><a class="dropdown-item" href="rm-roleManage">角色管理</a></li>
	          </ul>
	        </li>
		</s:if>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2">器材管理</a>
          <ul class="dropdown-menu">
          	<s:if test="'管理器材' in #session.rolePermission_name_list">
				<li><a href="em-equipmentManage">器材管理</a></li>
				<li><a href="er-equipmentRent">器材租借</a></li>
				<li><a href="er-equipmentRent">器材归还</a></li>
			</s:if>
			<s:else>
				<h3>器材</h3>
				<li><a href="er-equipmentRent">器材租借</a></li>
			</s:else>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink3">管理场地<span class="caret"></span></a>
          <ul class="dropdown-menu">
          <s:if test="'管理场地' in #session.rolePermission_name_list">
			<li><a href="add_field.action">场地添加</a></li>
			<li><a href="field_modifyRental.action">租金修改</a></li>
			<li><a href="field_show.action">显示场地</a></li>
		</s:if>
		<s:else>
			<h3>场地</h3>
			<li><a href="fieldAll_record.action">显示场地</a></li>	
			<li><a href="fieldRent_order.action">显示租用记录</a></li>	
		</s:else>
          </ul>
        </li>
        <li class=" nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink4">赛事管理<span class="caret"></span></a>
          <s:if test="'管理赛事' in #session.rolePermission_name_list">
			<ul class="dropdown-menu">
				<li><a href="matchApply_findAll.action?currPage=1" >查看赛事申请表</a></li>
				<li><a href="matchApply_apply.action">新建赛事申请表</a></li>
				<li><a href="matchApply_examine.action?currPage=1">审核赛事申请表</a></li>
				<li><a href="matchApply_delete.action?currPage=1" >删除赛事申请表</a></li>
				<li><a href="matchInfo_findAll.action?currPage=1" >查看赛事信息表</a></li>
				<li><a href="matchInfo_listUpdate.action?currPage=1" >更新赛事信息表</a></li>
				<li><a href="matchInfo_delete.action?currPage=1">删除赛事信息表</a></li>
			</ul>
		</s:if>
		<s:else>
			<li><a href="matchApply_findAll.action?currPage=1" >查看赛事申请表</a></li>
			<li><a href="matchInfo_findAll.action?currPage=1">查看赛事信息表</a>	</li>
		</s:else>
        </li>
       </ul>
      </div>
            <%-- <div class="navbar-header">
	      <a class="navbar-brand pull-right" >${sessionScope.user.userName}</a>
	  </div> --%>
  </div>
</nav>
	<form action="er-queryEp" method="post">	
		器材编号<input name="epId" type="text"  onkeyup="value=this.value.replace(/\D+/g,'')"
									value="${epId}" />
		<br/>
		器材名称<input name="epName" type="text" value="${epName}"/>
		
		<input  type="submit" value="查询"/>
		
	</form>
	<a data-target="#myRent" data-toggle="modal" class="myRent" href="">我的租借</a>
	<hr>
	
	<div id="ep_list">
		<table>
			<tr class="title">
				<th>器材编号</th>
				<th>器材名称</th>
				<th>器材总数</th>
				<th>器材剩余数</th>
				<th>器材租借费用(元/天)</th>
				<th>可租借的最长天数</th>
				<th>操作</th>
			</tr>

			<s:iterator value="#session.ep_list" var="ep" status="st">
				<tr>
					<td><s:property	value="#ep.equipmentId" /></td>
					<td><s:property	value="#ep.equipmentName" /></td>
					<td><s:property value="#ep.equipmentNum" /></td>
					<td><s:property value="#ep.equipmentRestNum" /></td>
					<td><s:property value="#ep.equipmentCost" /></td>
					<td><s:property value="#ep.equipmentRentTime" /></td>
					<td>
						<s:if test="#ep.equipmentRestNum>0">
							<a data-target="#bootstrap" data-toggle="modal" class="rentEp" href="<s:property value="#ep.equipmentId"/>">租借</a>
						</s:if>
					</td>
				</tr>
			</s:iterator>
		</table>
	
	</div>
	
	
	
		<!-- bootstrap弹出框！ -->
	<div class="modal fade" id="bootstrap" tabindex="-1" role="dialog"
		aria-labelledby="firefoxModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="firefoxModalLabel">器材租借</h4>
				</div>

				<div class="modal-body">
					<form action="er-rentEp" method="post" id = "rentFrom">
						<table width="424px">
							<tr>
								<td width="30%">租借的器材：</td>
								<td><input type="text" id="epName" readonly="readonly" /></td>
								<input type="hidden" name="equipmentId" id = "epId" >
							</tr>
							<tr>
								<td width="30%">租借人：</td>
								<td>
									<input type="text" readonly="readonly"  value="<s:property value='#session.user.userName'/>">
									<input type="hidden" name="renterId" value="<s:property value='#session.user.userId'/>">
								</td>
							</tr>

							<tr>
								<td width="30%">租借天数：</td>
								<td>
									<input type="text" id = "rentEpDays" name = "rentDuration" onkeyup="value=this.value.replace(/\D+/g,'')">
									<small></small>
								</td>
							</tr>
							
							<tr>
								<td width="30%">总价：</td>
								<td>
									<input type="text" readonly="readonly" id = "rentEpCosts" name = "rentCost">
								</td>
							</tr>
							
							<tr>
								<td width="30%"></td>
								<td>
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
									<input class="btn btn-primary" type="button" onclick="rentBtnClick()" value="租借">
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
	
		<!-- bootstrap弹出框！ -->
	<div class="modal fade" id="myRent" tabindex="-1" role="dialog"
		aria-labelledby="firefoxModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="firefoxModalLabel">我的租借记录</h4>
				</div>

				<div class="modal-body">
					<table>
						<tr>
							<th>器材编号</th>					
							<th>租借时间</th>					
							<th>租借时长(天)</th>					
							<th>租借总花费(元)</th>					
						</tr>
						<s:iterator value="#session.myRent" var="r">
							<tr>
								<td><s:property value="#r.equipmentId"/></td>									
								<td><s:date name="#r.rentTime" format="yyyy/MM/dd"/></td>									
								<td><s:property value="#r.rentDuration"/></td>									
								<td><s:property value="#r.rentCost"/></td>									
							</tr>				
						</s:iterator>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<script src="${pageContext.request.contextPath }/bootstrap/js/tether.min.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/util.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/modal.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/collapse.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/tooltip.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/popover.js"></script>
	
	
	
</body>
</html>